<template>

    <div class="interactContainer" ref="interactContainer" @click="createSelectionBox">
        <!-- 渲染框选区域 -->
        <div v-if="boxes.length" class="selection-box" :style="{
            left: boxes[0].x + 'px',
            top: boxes[0].y + 'px',
            width: boxes[0].width + 'px',
            height: boxes[0].height + 'px',
        }"></div>
    </div>

</template>

<script>
import interact from 'interactjs';

export default {
    name: '',
    components: {},
    data() {
        return {
            boxes: [], // 存储当前框选区域

        };
    },
    props: {

    },

    mounted() {


    },

    methods: {
        // 创建框选区域
        createSelectionBox(event) {
            const rect = this.$refs.interactContainer.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            // 清空已有的框选区域，确保只有一个框选区域
            this.boxes = [
                {
                    x,
                    y,
                    width: 50,
                    height: 50, // 默认宽高
                },
            ];

            // 等 DOM 更新完成后绑定拖动事件
            this.$nextTick(() => {
                const boxElement = this.$refs.interactContainer.querySelector(".selection-box");

                interact(boxElement).draggable({
                    listeners: {
                        start(event) {
                            const box = this.boxes[0];
                            box.startX = box.x; // 保存初始位置
                            box.startY = box.y;
                        },
                        move(event) {
                            const box = this.boxes[0];

                            box.x = box.startX + event.dx;
                            box.y = box.startY + event.dy;

                            event.target.style.transform = `translate(${box.x}px, ${box.y}px)`;
                        },
                    },
                });
            });

        },
    },


};
</script>

<style lang="scss" scoped>
.interactContainer {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    overflow: hidden;
    background-color: #f9f9f9;
}

.selection-box {
    position: absolute;
    border: 1px dashed #007bff;
    background-color: rgba(0, 123, 255, 0.2);
    cursor: grab;
    user-select: none;
}

.selection-box:active {
    cursor: grabbing;
}
</style>